<template>
  <div>
<!--    推荐设置范围：{{ options.min + '<=' + options.key + '&&' + options.key + '<=' + options.max }}-->
    <div v-show="!onlyShow">
      <el-form :inline="true" :model="exprForm" :rules="exprFormRulues" ref="exprForm" class="demo-form-inline">
        <el-form-item prop="min">
          <el-input v-model="exprForm.min" @input="(v)=>(exprForm.min=v.replace(/[^\d.]/g,''))" placeholder="请输入返回最小值"></el-input>
        </el-form-item>
        <el-form-item prop="minLimit">
          <el-select v-model='exprForm.minLimit'>
            <el-option label='≤' :value='true'>≤</el-option>
            <el-option label='＜' :value='false'>＜</el-option>
          </el-select>
        </el-form-item>
        {{exprForm.label}}
        <el-form-item prop="maxLimit">
          <el-select v-model='exprForm.maxLimit'>
            <el-option label='≤' :value='true'>≤</el-option>
            <el-option label='＜' :value='false'>＜</el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="max">
          <el-input v-model="exprForm.max" @input="(v)=>(exprForm.max=v.replace(/[^\d.]/g,''))" placeholder="请输入范围最大值"/>
        </el-form-item>
        <el-button @click="handleConfirmInputChange">确认</el-button>
      </el-form>
    </div>
    <template v-if="values">
      <div v-for="(item, index) in values" :key="'values' + index">
        已设置范围：
        <div>
          {{ item.min }}{{ item.max }}
        </div>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'index',
  props: {
    options: {
      type: Object,
      default: () => {
        return {
          max: 100,
          min: 0,
          key: 'key',
          label: 'label'
        }
      }
    },
    value: [String, Array],
    isJson: {
      type: Boolean,
      default: false
    },
    onlyShow: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    values() {
      if (this.value !== null && typeof this.value !== 'undefined') {
        return Array.isArray(this.value) ? this.value : [String(this.value)]
      } else {
        return []
      }
    }
  },
  watch: {
    options(newValue) {
      this.init()
    }
  },
  data() {
    return {
      exprForm: {
        key: undefined,
        min: undefined,
        max: undefined,
        minLimit: undefined,
        maxLimit: undefined
      },
      exprFormRulues: {

      },
      scoreItemList: []
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.exprForm = {
        key: this.options.key || 'key',
        label: this.options.label || 'label',
        min: this.options.min || '0',
        max: this.options.max || '100',
        minLimit: true,
        maxLimit: true
      }
    },
    handleConfirmInputChange() {
      let scoreItem = {
        ...this.exprForm,
      }
      // console.log(scoreItem)
      let expr = ''
      let show = ''
      if (scoreItem.min && scoreItem.min !== '') {
        expr += scoreItem.min + (scoreItem.minLimit ? '<=' : '<') + scoreItem.key
        show += scoreItem.min + (scoreItem.minLimit ? '≤' : '＜')
      }
      if (scoreItem.min && scoreItem.min !== '' && scoreItem.max && scoreItem.max !== '') {
        expr += '&&'
      }
      show+=scoreItem.key
      if (scoreItem.max && scoreItem.max !== '') {
        expr += scoreItem.key + (scoreItem.maxLimit ? '<=' : '<') + scoreItem.max
        show += (scoreItem.maxLimit ? '≤' : '＜') + scoreItem.max
      }
      // console.log(scoreItem)
      // console.log(scoreItem.expr)
      scoreItem.expr = expr
      scoreItem.show = show
      this.$emit('confirm', scoreItem)
    }
  }
}
</script>

<style scoped>

</style>
